<template>
	<view id="wrapper" class="wrapper  text-white" :style="[{top: top+'px'}]">
		<view id="content1" class="padding-lr justify-between w100 align-center flex content1 " style="height: 108rpx;">
			<view class="search-form padding-lr padding-tb-14 flex align-center round">
				<text class="cuIcon-search text-white margin-right-sm"></text>
				<input confirm-type="search" class="text-white text-sm" type="text" placeholder-class="text-white"
					v-model="keywords" :adjust-position="false" :hold-keyboard="false" placeholder="商品名称、商品货号 "
					@confirm="searchConfirm" />
				<text v-if="keywords.length != 0" class="cuIcon-close text-white padding-right-xs"
					@tap="handleClear"></text>
			</view>
			<view class="flex align-center flex-shrink">
				<view class=" flex align-center justify-end padding-right solids-right" @click="selectFilter(0)">
					<text class="cuIcon-filter text-df text-white"></text>
					<text class="text-white text-sm margin-left-xs">{{i18n['筛选']}}</text>
				</view>
				<view class="flex   padding-left ">
					<view class="flex justify-center align-center" @tap="selectFilter(1)">
						<text class="cuIcon-apps text-df text-white" style="font-size: 36rpx;"></text>
						<text class="text-white text-sm margin-left-xs">分类</text>
					</view>
				</view>
			</view>
		</view>
		<view class="filter-pop bg-white overHidden" v-if="popOpen" @touchmove.stop.prevent
			style="touch-action: none; border-radius: 0 0 32rpx 32rpx;">
			<!-- <view class="filter-pop-mark1" @tap.stop="close" @touchmove.stop.prevent style="touch-action: none;"></view> -->
			<view class="filter-pop-mark" @tap.stop="close" :style="{height: markHeight}" @touchmove.stop.prevent
				style="touch-action: none;"></view>
			<template v-if="activeFilter == 1">
				<view class="height-732 bg-white relative" style="z-index: 350;">
					<view class="room-list flex solid-bottom" @touchmove.stop.prevent style="touch-action: none;">
						<scroll-view class="left margin-right-xl height-600" scroll-y scroll-with-animation>
							<block v-for="(item, index) in storeTypeList" :key="index">
								<view class="padding-tb padding-left  fu-fs28"
									:class="[leftIndex == index ? 'bg-white text-333 activeL' : 'text-999']"
									@tap="chooseLeft(item, index)">{{item.name}}</view>
							</block>
						</scroll-view>
						<scroll-view class="right flex-sub height-600" scroll-y scroll-with-animation>
							<block v-for="(item, index) in slist" :key="index">
								<view class="padding-tb solid-bottom   fu-fs28"
									:class="[rightIndex == index ? 'text-theme' : 'text-333']"
									@tap="chooseRight(item, index)">{{item.name}}</view>
							</block>
							<view class="padding-tb" v-if="slist==''"> 暂没有内容哦 </view>
						</scroll-view>
					</view>
					<view class="flex align-center justify-between padding">
						<view class="line-theme text-theme w45 text-center text-df radius-100 padding-tb-14"
							@tap='resetPop(1)'>重置</view>
						<view class="bg-theme text-white w45 text-center text-df radius-100 padding-tb-14"
							@tap='handelConfirm(1)'>确定</view>
					</view>
				</view>
			</template>

			<template v-if="activeFilter == 0">
				<view class="bg-white height-550 radius-32      relative" style="z-index: 350;">
					<view class="height-400 padding-lr solid-bottom">
						<view class="flex align-center padding-tb ">
							<view class="flex-shrink text-333 text-df text-bold margin-right-60">价格区间</view>
							<view class="flex algin-center ">
								<view class="radius-100 padding-lr text-center padding-tb-xs  bg-f8">
									<input type="digit" placeholder="最低价格" v-model="minVal" maxlength="7"
										class=" text-df " @input="priceIpt($event,'min')">
								</view>
								<text class="margin-lr-40 text-999">-</text>
								<view class="radius-100 padding-lr text-center padding-tb-xs  bg-f8">
									<input type="digit" placeholder="最高价格" v-model="maxVal" maxlength="7"
										class=" text-df " @input="priceIpt($event,'max')">
								</view>
							</view>
						</view>
						<view class="flex align-center padding-tb ">
							<view class="flex-shrink text-333 text-df text-bold margin-right-60">销量区间</view>
							<view class="flex algin-center ">
								<view class="radius-100 padding-lr text-center padding-tb-xs  bg-f8">
									<input type="digit" placeholder="最低销量" v-model="minSales" maxlength="7"
										class=" text-df " @input="iptIpt($event,'sales','min')">
								</view>
								<text class="margin-lr-40 text-999">-</text>
								<view class="radius-100 padding-lr text-center padding-tb-xs  bg-f8">
									<input type="digit" placeholder="最高销量" v-model="maxSales" maxlength="7"
										class=" text-df " @input="iptIpt($event,'sales','max')">
								</view>
							</view>
						</view>
						<view class="flex align-center padding-tb ">
							<view class="flex-shrink text-333 text-df text-bold margin-right-60">库存区间</view>
							<view class="flex algin-center ">
								<view class="radius-100 padding-lr text-center padding-tb-xs  bg-f8">
									<input type="digit" placeholder="最低库存" v-model="minStock" maxlength="7"
										class=" text-df " @input="iptIpt($event,'stock','min')">
								</view>
								<text class="margin-lr-40 text-999">-</text>
								<view class="radius-100 padding-lr text-center padding-tb-xs  bg-f8">
									<input type="digit" placeholder="最高库存" v-model="maxStock" maxlength="7"
										class=" text-df " @input="iptIpt($event,'stock','max')">
								</view>
							</view>
						</view>
					</view>
					<view class="flex align-center justify-between padding margin-top-sm">
						<view class="line-theme text-theme w45 text-center text-df radius-100 padding-tb-14"
							@tap='resetPop(0)'>重置</view>
						<view class="bg-theme text-white w45 text-center text-df radius-100 padding-tb-14"
							@tap='handelConfirm(0)'>确定</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top: {
				type: [String, Number],
				default: 0,
			},
			filterKeyword: {
				type: [String]
			},
			cid: {
				type: [String, Number]
			}
		},
		data() {
			return {
				num: 0, // 高级搜索结束商品数量显示
				minVal: '', // 最小价格
				maxVal: '', // 最大价格
				goodsSkuList: [], // 高级筛选商品sku列表
				goodsServiceLabel: [], // 服务
				brandList: [], // 品牌
				typeList: [], // 分类
				allTypeList: [], // 总分类
				keywords: '',
				filterType: 'multiple', // 排序类型
				minSales: '', //销量
				maxSales: '', //销量
				minStock: '', //库存
				maxStock: '', //库存
				windowWidth: 0, // 页面宽
				windowHeight: 0, // 页面高
				showDrawer: false, // 侧边遮罩
				popOpen: false, // 是否显示筛选弹窗
				markHeight: '0px', // 蒙版高度，需要计算
				leftIndex: '0',
				rightIndex: null,
				storeTypeList: [], //店铺分类
				slist: [], //
			};
		},
		watch: {
			// filterKeyword(newVal,oldVal){
			//   console.log('filterKeyword',newVal)
			//   this.resetPop();
			// },
			'filterKeyword': {
				handler(newVal, oldVal) {
					this.resetPop();
				}
			}
		},
		mounted() {
			this.getBusinessTypeList()
		},
		methods: {
			searchConfirm() {
				if (!this.keywords) {
					return this.$message.info('请输入内容')
				}
				this.$emit('searchInfo', this.keywords)
			},
			priceIpt(e, type) {
				let num2 = e.detail.value
				if (num2.split('.') && num2.split('.')[1] && num2.split('.')[1].length > 2) {
					if (type == 'min') {
						this.minVal = ''
					} else {
						this.maxVal = ''
					}
					return this.$message.info("请输入正确的金额");

				}
				if (num2 <= 0) {
					if (type == 'min') {
						this.minVal = ''
					} else {
						this.maxVal = ''
					}
					return this.$message.info('请输入正确的金额')
				}
			},
			iptIpt(e, type,ctype) {
				let num1 = e.detail.value
				if (num1 % 1 != 0) {
					if(type=='sales'){
						if (ctype == 'min') {
							this.minSales = ''
						} else {
							this.maxSales = ''
						}
					}else{
						if (ctype == 'min') {
							this.minStock = ''
						} else {
							this.maxStock = ''
						}
					}
					
					return this.$message.info((type == 'sales' ? '销量' : '库存') + '不能输入小数')
				}
				if (num1 <= 0) {
					if(type=='sales'){
						if (ctype == 'min') {
							this.minSales = ''
						} else {
							this.maxSales = ''
						}
					}else{
						if (ctype == 'min') {
							this.minStock = ''
						} else {
							this.maxStock = ''
						}
					}
					return this.$message.info((type == 'sales' ? '销量' : '库存') + '不能为负数')
				}
			},
			/**
			 * @param {Number} index  filterTypeList的索引
			 */
			selectFilter(index) {
				if (this.activeFilter == index) {
					this.activeFilter = null;
					this.popOpen = false;
					return;
				}
				// 动态获取当前wrapper距离底部的高度

				uni.createSelectorQuery().select('.wrapper').boundingClientRect(data => {
					this.$nextTick(() => {
						if (index == 0) {
							this.markHeight = `calc(100vh - ${data.top + data.height+264}px)`;
						} else {
							this.markHeight = `calc(100vh - ${data.top + data.height+350}px)`;
						}
					})
				}).exec();
				this.activeFilter = index;
				this.popOpen = true;
			},
			//分类重置 去重
			getNewTypeListData() {
				this.typeVal = ''
				let newTypeData = [];
				let deWeightData = [];
				this.typeList = []
				this.brandList.forEach((item, index) => {
					if (item.selected) {
						newTypeData = newTypeData.concat(this.allTypeList[item.brand_id])
						newTypeData.forEach(item => {
							let flag = false;
							deWeightData.forEach(j => {
								if (j.cid == item.cid) {
									flag = true
								}
							})
							if (!flag) {
								deWeightData.push(item)
							}
						})
					}
				})
				// console.log(deWeightData)
				this.typeList = deWeightData
				// 获取已选中的品牌
				let brandList = [];
				this.brandList.forEach(item => {
					if (item.selected) {
						brandList.push(item.brand_id)
					}
				})
				// 未选中品牌，显示所有分类
				if (brandList.length == 0) {
					this.typeList = this.allTypeList.allType
				}
			},
			chooseLeft(item, index) {
				this.leftIndex = index
				this.slist = item.child
				this.rightIndex = null
			},
			chooseRight(item, index) {
				this.rightIndex = index

			},
			// 店铺商品分类 二级
			getBusinessTypeList() {
				this.$api.post('/v1/6356329f1f82a', {
					partner_id: global.userInfo && global.userInfo.id
				}).then(res => {
					let data = res.data;
					if (data.code == 1) {
						let list = data.data;
						// 判断没有二级分类删除此分类
						list.length>0&&list.forEach((item, index) => {
							if (item.child_count <= 0) {
								list.splice(index, 1);
							}
						});
						this.storeTypeList = list
						this.slist = list.length>0&&list[0].child
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err,'err');
					this.$message.info("服务器错误，请稍后重试");
				});
			},

			// 清除关键字
			handleClear() {
				this.keywords = '';
				this.$emit('searchInfo', '')
				uni.hideKeyboard();
			},
			// 重置筛选条件
			resetPop(e) {
				if (e == 1) { // 分类
					this.leftIndex = 0
					this.rightIndex = null
					this.rightId = 0
				} else { //筛选
					this.minVal = ''
					this.maxVal = ''
					this.minSales = ''
					this.maxSales = ''
					this.minStock = ''
					this.maxStock = ''
				}

				this.handelConfirm(false)
			},
			// 提交确认高级筛选
			handelConfirm(e) {
				let categoryId = ''
				if (e == 1) { //分类
				if(this.rightIndex==null){
					return this.$message.info('请选择分类')
				}
					categoryId = this.slist[this.rightIndex].id
				} else { //筛选
					if (this.minVal && this.maxVal) {
						if (Number(this.minVal) > Number(this.maxVal)) {
							[this.minVal, this.maxVal] = [this.maxVal, this.minVal]
						}
					}
				}

				let filterObj = {
					goods_shop_category: categoryId, //分类id
					min_price: Number(this.minVal).toFixed(2),
					max_price: Number(this.maxVal).toFixed(2),
					min_sale: this.minSales,
					max_sale: this.maxSales,
					min_stock: this.minStock,
					max_stock: this.maxStock,
				}

				this.$emit('changeFilter', filterObj);
				console.log(filterObj, 'filterObj')
				this.popOpen = false;
			},

			// 关闭弹窗
			close() {
				this.activeFilter = null;
				this.popOpen = false;
			},

		},
		created() {
			let info = uni.getSystemInfoSync();
			this.windowWidth = info.windowWidth;
			this.windowHeight = info.windowHeight;
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: sticky;
		z-index: 9999;

		.content1 {
			.right {
				width: 80rpx;
				position: relative;
				padding-left: 20rpx;
			}

			// .right::after {
			//   content: "";
			//   width: 2rpx;
			//   height: 26rpx;
			//   background-color: #999999;
			//   position: absolute;
			//   top: 50%;
			//   left: 50%;
			//   transform: translateX(-50%) translateY(-50%);
			// }
		}

		.content2 {
			padding: 0 30rpx 20rpx 30rpx;

			.left {
				width: calc(100% - 100rpx);
				white-space: nowrap;

			}

			.right {
				width: 100rpx;
			}
		}

		.masks {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: transparent;
			display: flex;
			flex-direction: column;

			.top {
				background-color: rgba(0, 0, 0, 0);
			}

			.bot {
				flex: 1;
				background-color: rgba(0, 0, 0, 0.7);

				.container {
					border-radius: 0 0 16rpx 16rpx;
					background-color: #F5F5F5;
					padding: 30rpx;

					.scroll-view {
						max-height: 300rpx;
					}
				}
			}
		}

		.active {
			color: $theme !important;
			font-weight: bold;
		}

		.active2 {
			box-shadow: inset 0 0 2rpx 2rpx $theme;
			background-color: rgba(240, 35, 37, 0.1) !important;
			color: $theme;
		}

		.active3 {
			color: $theme !important;
		}

		.masks2 {
			position: fixed;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.7);
			display: flex;
			justify-content: flex-end;

			.container {
				width: 70%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;
				background-color: #FFFFFF;
			}
		}
	}



	.action-box {
		display: flex;
		margin-top: 30rpx;

		.action {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 62rpx 0px 0px 62rpx;
			;
			font-size: 24rpx;
			text-align: center;
		}

		.action+.action {
			margin-left: 4rpx;
			border-radius: 0px 62px 62px 0px;
		}

		.reset {
			color: #fff;
			background-color: #FFA264;
		}

		.confirm {
			color: #FFFFFF;
			background: $bgtheme;
		}
	}

	.block-28 {
		width: 28rpx;
		height: 28rpx;
	}

	.scale {
		font-size: 32rpx !important;

		&.cuIcon-triangleupfill {
			line-height: 20rpx;
		}

		&.cuIcon-triangledownfill {
			line-height: 20rpx;
		}
	}

	.translateTop {
		// transform: translateY(5rpx);
		/*  */
	}

	.translateBot {
		// transform: translateY(-5rpx);
	}

	.pop-btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #f1f1f1;
		margin-top: 0;
	}

	.pop-content {
		height: 92%;
		padding: 20rpx;
		padding-bottom: 120rpx;
	}

	.title {
		font-weight: 500;
		color: #000;
		margin-top: 20rpx;
	}

	.list-item {
		background-color: #F5F5F5;
		display: inline-block;
		margin-bottom: 20rpx;
	}

	.serviceItem {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;

		text {
			width: 31%;
			margin: 0 0 16rpx 0;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 20rpx;
		}
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.ml-4 {
		margin-left: 4rpx;
	}

	.service {
		margin-top: 20rpx;
	}

	.price-round {
		padding: 20rpx 10rpx;

		.round {
			padding: 10rpx 0;
			text-align: center;
			background: #fff;
			border: 1px solid #ccc;
		}
	}

	.price-round input {
		font-size: 24rpx;
		height: 50rpx;
		padding: 0 60rpx;
	}

	.border-center {
		height: 50rpx;
		margin: 0 15rpx;
	}

	.scale.cuIcon-triangledownfill {
		line-height: 12rpx;
	}

	.scale.cuIcon-triangleupfill {
		line-height: 12rpx;
	}

	.search-form {
		background: rgba(255, 255, 255, 0.3);
	}

	.filter-pop {
		position: absolute;
		width: 100%;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10000;

		.filter-pop-mark {
			background: rgba(0, 0, 0, 0.3);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 300;
		}

		.filter-pop-mark1 {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3000;
		}

		.filter-content {
			position: relative;
			z-index: 9900;
		}

		.room-list {
			position: relative;
			z-index: 9900;

			.left {
				position: relative;
				z-index: 9900;
				width: 220rpx;
				background: #f8f8f8;
			}
		}
	}

	.activeL {
		position: relative;
	}

	.activeL::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 6rpx;
		height: 40rpx;
		border-radius: 16rpx;
		background-color: $bgtheme1;

	}
</style>
